import styleNotfond from "./NotFound.module.less";
import React from "react";
import { TinyColor } from "@ctrl/tinycolor";
import { useNavigate } from "react-router-dom";
import { ConfigProvider, Button } from "antd";
const NotFound = () => {
  const colors1 = ["#6253E1", "#04BEFE"];
  const getHoverColors = (colors) => colors.map((color) => new TinyColor(color).lighten(5).toString());
  const getActiveColors = (colors) => colors.map((color) => new TinyColor(color).darken(5).toString());

  let useNavigateGo = useNavigate();
  let backHome = () => {
    useNavigateGo("/home");
  };
  return (
    <div className={styleNotfond.root}>
      <div className={styleNotfond.center}>
        <h1 className={styleNotfond.text}>404 - Page Not Found</h1>
        <div className={styleNotfond.bucenter}>
          <ConfigProvider
            className={styleNotfond.bucenter}
            theme={{
              components: {
                Button: {
                  colorPrimary: `linear-gradient(135deg, ${colors1.join(", ")})`,
                  colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors1).join(", ")})`,
                  colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors1).join(", ")})`,
                  lineWidth: 0,
                },
              },
            }}
          >
            <Button type="primary" size="large" onClick={backHome}>
              点击返回首页
            </Button>
          </ConfigProvider>
        </div>
      </div>
    </div>
  );
};
export default NotFound;
